import { BaseMenu, MenuTheme } from './BaseMenu';
import { MenuConfig } from '../MenuManager';
import { Vector2D } from '../../utils/Vector2D';

export class MainMenu extends BaseMenu {
    private buttonHeight: number = 60;
    private spacing: number = 20;
    private menuItems: string[] = ['开始游戏', '游戏模式', '游戏设置', '能力升级', '更换皮肤', '退出游戏'];

    constructor(config: MenuConfig) {
        super(config);
    }

    public render(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement): void {
        const totalHeight = this.menuItems.length * this.buttonHeight + (this.menuItems.length - 1) * this.spacing;
        let y = (canvas.height - totalHeight) / 2;

        this.menuItems.forEach((item, index) => {
            const x = canvas.width / 2;
            this.drawMenuButton(ctx, x, y, 300, this.buttonHeight, item);
            y += this.buttonHeight + this.spacing;
        });
    }

    public handleClick(x: number, y: number, canvas: HTMLCanvasElement): string | null {
        const totalHeight = this.menuItems.length * this.buttonHeight + (this.menuItems.length - 1) * this.spacing;
        let currentY = (canvas.height - totalHeight) / 2;

        for (let i = 0; i < this.menuItems.length; i++) {
            const buttonX = canvas.width / 2;
            const buttonWidth = 300;

            if (x >= buttonX - buttonWidth/2 && x <= buttonX + buttonWidth/2 &&
                y >= currentY && y <= currentY + this.buttonHeight) {
                switch (i) {
                    case 0: // 开始游戏
                        return 'startGame';
                    case 1: // 游戏模式
                        return 'modes';
                    case 2: // 游戏设置
                        return 'settings';
                    case 3: // 能力升级
                        return 'upgrade';
                    case 4: // 皮肤商店
                        return 'shop';
                    case 5: // 退出游戏
                        return 'exit';
                }
            }
            currentY += this.buttonHeight + this.spacing;
        }
        return null;
    }

    public update(deltaTime: number): void {
        // 主菜单可能不需要更新逻辑
    }

    private drawMenuButton(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, text: string): void {
        // 绘制按钮背景
        ctx.fillStyle = this.theme.backgroundColor;
        ctx.strokeStyle = this.theme.borderColor;
        ctx.lineWidth = 2;
        
        // 使用圆角矩形
        ctx.beginPath();
        ctx.roundRect(x - width / 2, y, width, height, 10);
        ctx.fill();
        ctx.stroke();
        
        // 绘制按钮文本
        ctx.fillStyle = this.theme.textColor;
        ctx.font = 'bold 20px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(text, x, y + height / 2);
        
        // 添加科技感装饰
        this.drawButtonDecoration(ctx, x, y, width, height);
    }
    
    private drawButtonDecoration(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number): void {
        // 添加角落装饰
        ctx.strokeStyle = this.theme.highlightColor;
        ctx.lineWidth = 1;
        
        // 左上角
        ctx.beginPath();
        ctx.moveTo(x - width / 2, y + 10);
        ctx.lineTo(x - width / 2, y);
        ctx.lineTo(x - width / 2 + 10, y);
        ctx.stroke();
        
        // 右上角
        ctx.beginPath();
        ctx.moveTo(x + width / 2 - 10, y);
        ctx.lineTo(x + width / 2, y);
        ctx.lineTo(x + width / 2, y + 10);
        ctx.stroke();
        
        // 左下角
        ctx.beginPath();
        ctx.moveTo(x - width / 2, y + height - 10);
        ctx.lineTo(x - width / 2, y + height);
        ctx.lineTo(x - width / 2 + 10, y + height);
        ctx.stroke();
        
        // 右下角
        ctx.beginPath();
        ctx.moveTo(x + width / 2 - 10, y + height);
        ctx.lineTo(x + width / 2, y + height);
        ctx.lineTo(x + width / 2, y + height - 10);
        ctx.stroke();
    }
}